<template>
	<div>
		<div class="top">
			<div class="left" @click="back()">×</div>
			<div class="rig">账户登录</div>
			<div class="left"></div>
		</div>
		<div class="main">
			<div class="one">
				<span>账户</span>
				<input
					v-model="username"
					type="text"
					name="username"
					id=""
					placeholder="请输入您的账户"
				/>
			</div>
			<div class="two">
				<span>密码</span>
				<input
					v-model="password"
					type="password"
					name="password"
					id=""
					placeholder="请输入密码"
				/>
			</div>
			<div class="three">
				<button ref="login" @click="fun()" :disabled="!bool">登录</button>
			</div>
			<div class="four">
				<div class="left">短信验证登录</div>
				<div class="right">忘记密码</div>
			</div>
			<div class="five" @click="go()">免费注册</div>
		</div>
	</div>
</template>

<script>
import { postlink } from "@/api/postapi.js";
	export default {
		methods: {
			back() {
				this.$router.go(-1);
			},
			go() {
				this.$router.push("/regist");
			},
			fun() {
				let usp = new URLSearchParams();
				usp.append("username", this.username);
				usp.append("password", this.password);
				postlink("http://1.116.51.111:8000/login/login/", usp)
					.then((ok) => {
						console.log(ok);
						if (ok.data.msg == "登陆成功") {
							alert("登录成功");
							// 还需要把后台给我们的token保存起来  cookie   本地存储
							window.localStorage.setItem(
								"Token",
								ok.data.token
							);
							// 登录成功
							this.$router.push("/home/homeTabA");
						}else {
							alert("用户名或密码错误，请重新输入");
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
		data() {
			return {
				username: "",
				password: "",
				bool: false,
			};
		},
		watch: {
			username() {
				if (this.username && this.password) {
					this.$refs.login.style.backgroundColor = "orange";
					this.bool = true;
				} else {
					this.$refs.login.style.backgroundColor = "#ccc";this.bool = false;
				}
			},
			password() {
				if (this.password && this.username) {
					this.$refs.login.style.backgroundColor = "orange";
					this.bool = true;
				} else {
					this.$refs.login.style.backgroundColor = "#ccc";this.bool = false;
				}
			},
		},
	};
</script>

<style scoped>
	div {
		box-sizing: border-box;
	}
	.top {
		width: 100%;
		height: 0.2rem;
		font-size: 0.11rem;
		display: flex;
		justify-content: space-between;
		line-height: 0.2rem;
		padding: 0.2rem 0.3rem;
	}
	.main {
		padding: 0 0.3rem 0.3rem 0.3rem;
		color: #999;
	}
	.main .one,
	.main .two,
	.main .three {
		border-bottom: 1px solid #ccc;
		display: flex;
		padding: 0.2rem 0;
	}
	.main .one span,
	.main .two span {
		width: 0.6rem;
	}
	.main .one input,
	.main .two input {
		flex: 1;
		border: none;
	}
	.main .three {
		height: 0.8rem;
		width: 100%;
		border: none;
	}
	.main .three button {
		width: 100%;
		height: 100%;
		color: #fff;
		border: none;
		border-radius: 0.05rem;
		background: #ccc;
	}
	.four .left {
		float: left;
	}
	.four .right {
		float: right;
	}
	.five {
		margin: 0.6rem;
		text-align: center;
		padding: 0.1rem;
		border: 1px solid orange;
		color: orange;
		border-radius: 0.05rem;
	}
</style>